<!DOCTYPE html>
<html lang="en">
<include file="./Application/Home/View/Layout/head.html" />

        <link href="__PUBLIC__/assets/bootstrap/css/select2.css" rel="stylesheet" />
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/bootstrap-datetimepicker.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		<link href="__PUBLIC__/assets/bootstrap/css/jquery.audioplayer.css" rel="stylesheet" />
<script type="text/javascript">
var SearchMode1 = "{$SearchMode1}"
var SearchMode2 = "{$SearchMode2}"
</script>
<style type="text/css">
    .loadEffect{
        width: 100px;
        height: 100px;
        position: relative;
        margin: 0 auto;
        display:none;
    }
    .loadEffect span{
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: lightgreen;
        position: absolute;
        -webkit-animation: load 1.04s ease infinite;
    }
    @-webkit-keyframes load{
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0.2;
        }
    }
    .loadEffect span:nth-child(1){
        left: 0;
        top: 50%;
        margin-top:-8px;
        -webkit-animation-delay:0.13s;
    }
    .loadEffect span:nth-child(2){
        left: 14px;
        top: 14px;
        -webkit-animation-delay:0.26s;
    }
    .loadEffect span:nth-child(3){
        left: 50%;
        top: 0;
        margin-left: -8px;
        -webkit-animation-delay:0.39s;
    }
    .loadEffect span:nth-child(4){
        top: 14px;
        right:14px;
        -webkit-animation-delay:0.52s;
    }
    .loadEffect span:nth-child(5){
        right: 0;
        top: 50%;
        margin-top:-8px;
        -webkit-animation-delay:0.65s;
    }
    .loadEffect span:nth-child(6){
        right: 14px;
        bottom:14px;
        -webkit-animation-delay:0.78s;
    }
    .loadEffect span:nth-child(7){
        bottom: 0;
        left: 50%;
        margin-left: -8px;
        -webkit-animation-delay:0.91s;
    }
    .loadEffect span:nth-child(8){
        bottom: 14px;
        left: 14px;
        -webkit-animation-delay:1.04s;
    }

     .Alertmessage{
    text-align: center;
    color: red;
 }
 #datatable {
	border: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 12px;
}
td,th {
	border: 1px solid #ccc;
	padding: 4px 20px;
}
</style>
    <body>

        <block name="header">
           <include file="block/header"/>
        </block>
        <section>
            <div class="mainwrapper">
			   <block name="left">
			   <include file="block/left" />
               </block>

                <div class="mainpanel">
                    <div class="contentpanel">
                        <div class="panel panel-title-head">
                            <div class="search_banner">
                              <form id="form1" method="post" action=""  onsubmit="return tijiao();">
                                <div>
	                                <!-- <div class="pull-left col-md-1">
	                                    <h4 class="panel-title">录音查询</h4>
	                                </div> -->
	                                <div class="pull-left col-md-3">
	                                <div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">开始时间：<input name="datetimepicker_start" id="datetimepicker_start" type="text" value="{$datetimepicker_start}" /></lable><br>
		                             </div>
		                             <div class="input-group" style="padding:5px;">
                                        <lable class="pull-left">结束时间：<input name="datetimepicker_end" id="datetimepicker_end" type="text" value="{$datetimepicker_end}" /></lable>
                                     </div>
	                                </div>
	                                <div class="pull-left col-md-4">
                                        <div class="search_input_group">

										      <span class="search_input-group-addon">
										        <input name="SearchMode1"  <if condition="$SearchMode1 eq 1"> checked </if>  value="1" type="checkbox" aria-label="...">呼出
										        <input name="SearchMode2"  <if condition="$SearchMode2 eq 1"> checked </if>  value="1" type="checkbox" aria-label="...">呼入
										      </span>
                                            <input type="text" name="search_key" id="search_key" class="search_form-control" placeholder="请输入统计号码" aria-label="..." value="{$search_key}">

                                        </div>
	                                </div>
	                                <div class="pull-left col-md-2">
											<button class="btn btn-info btn-large search">搜索</button>
	                                </div>
									<div class="pull-right col-md-3" style="text-align:right;" >
									     <div class="btn-group" >
											<label class="btn btn-primary tongji-sel">
												表格统计
											</label>
											<input type="hidden" name="tongji-sel-val" id="tongji-sel-val" value="0">
										</div>
									</div>
                                </div>
                                </form>
                                <div style="clear:both"></div>
                            </div><!-- panel-heading -->
                            <div id="container" style="min-width:400px;height:400px"></div>


                        </div><!-- panel -->

                        <div style="height:150px;background-color:#fff;margin:auto;margin-top:20px;padding:10px 20px;width:100%;">
						       <div style="text-align:center;">统计表</div>
                               <div style="text-align:right;">
                                   <button class="btn btn-success xx-small" type="button" onclick="batDownExcel()">导出EXCEL</button>
                               </div>
							   <div style="width: 100%;overflow-x: auto;">
							   <div style="width: {$divWidth}px;float:left;">
							            <div style="float:left;width:{$p};">
											<div style="height:20px;border-bottom:1px solid #ccc;"></div>
											<div style="height:20px;border-bottom:1px solid #ccc;">呼入量</div>
											<div style="height:20px;border-bottom:1px solid #ccc;">呼出量</div>
											<div style="height:20px;border-bottom:1px solid #ccc;">通话时长</div>
										</div>
							       <foreach name="tabledata" item="vo" key="k">
								        <div style="float:left;width:{$p};">
											<div style="height:20px;border-bottom:1px solid #ccc;">{$vo.dt}</div>
											<div style="height:20px;border-bottom:1px solid #ccc;">{$vo.huru}</div>
											<div style="height:20px;border-bottom:1px solid #ccc;">{$vo.huchu}</div>
											<div style="height:20px;border-bottom:1px solid #ccc;">{$vo.csecond}</div>
										</div>
                                   </foreach>
                               </div>
							   </div>
                        </div>


                        </div><!-- panel -->


                    </div><!-- contentpanel -->
                </div><!-- mainpanel --><!-- mainpanel -->
            </div><!-- mainwrapper -->


                    <!-- 告警模态框 -->
        <div class="modal fade" id="alertModel" tabindex="-1" role="dialog" aria-labelledby="myAlert">
          <div class="modal-dialog" role="document" style="width:450px">
            <div class="modal-content" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myAlert" style="text-align: center;">提示</h4>
              </div>
              <div class="modal-body">
                <div class="inner">
                    <h4 class="Alertmessage"> </h4>
                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!-- <button type="button" class="btn btn-primary">确定</button> -->
              </div>
            </div>
          </div>
        </div>

            <div class="modal fade" id="videoPlayMod" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel" style="text-align: center;">正在玩命地打包</h4>
                        </div>
                        <div class="modal-body">
                            <div class="inner">
                                <h4 class="downloadName"></h4>
                            </div>
                            <div class="loadEffect">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <!-- <button type="button" class="btn btn-primary">确定</button> -->
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.datatables.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap-datetimepicker.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/custom.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery-migrate-1.2.1.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.jqprint-0.3.js"></script>
		<script src="__PUBLIC__/assets/bootstrap/js/highcharts/highcharts.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/highcharts/exporting.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/highcharts/highcharts-zh_CN.js"></script>

<script type="text/javascript">
$(document).ready( function () {
    var canSearch = "{$canSearch}";
	var canAudit = "{$canAudit}";
    if(canSearch == 0 && canAudit == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有查询或审计权限，请联系管理员')
        return;
    }
	$(".tongji-sel").click(function(){
	    window.location.href="/home/record/recordCount"
	})


var chart = Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: '通话数与通话时长'
    },
    subtitle: {
        text: '录音统计'
    },
    xAxis: [{
        categories: {$jsddt},
        crosshair: true
    }],
    yAxis: [
	{ // Primary yAxis
        title: {
            text: '通话时长',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value}/s',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },

        opposite: true
    },
	{ // Secondary yAxis
        labels: {
            format: '{value}通',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        title: {
            text: '通话数',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        allowDecimals:false,
        dataLabels: {
            crop:false,
            enabled: true,
            overflow:'none',
        },
    }],
    tooltip: {
        shared: true
    },

    series: [{
        name: '呼入量',
        type: 'column',
        yAxis: 1,
        data: {$jshuru},
        tooltip: {
            valueSuffix: ' 通'
        }
    }, {
        name: '呼出量',
        type: 'column',
        yAxis: 1,
        data: {$jshuchu},
        tooltip: {
            valueSuffix: ' 通'
        }
    },{
        name: '通话时长',
        type: 'spline',
        data: {$jscsecond},
        tooltip: {
            valueSuffix: '秒'
        }
    }]
});

});


$('.search').click(function(){
    var canSearch = "{$canSearch}";
    if(canSearch == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有查询权限，请联系管理员')
        return;
    }


})

 jQuery('#datetimepicker_start').datetimepicker.dates['zh'] = {
        format : "yyyy-mm-dd hh:ii:ss",
        days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
        daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
        daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
        months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
        monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
        meridiem:    ["上午", "下午"],
        //suffix:      ["st", "nd", "rd", "th"],
        today:       "今天"
};

jQuery('#datetimepicker_end').datetimepicker.dates['zh'] = {
    format : "yyyy-mm-dd hh:ii:ss",
    days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
    daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
    daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
    months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
    monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
    meridiem:    ["上午", "下午"],
    //suffix:      ["st", "nd", "rd", "th"],
    today:       "今天"
};

    jQuery('#datetimepicker_start').datetimepicker({language:'zh'});
    jQuery('#datetimepicker_end').datetimepicker({language:'zh'});

function batDownExcel(){

    $("input:radio[name='SearchMode1']:checked").each(function() {
        SearchMode1 = $(this).val();  // 每一个被选中项的值
    });
    $("input:radio[name='SearchMode2']:checked").each(function() {
        SearchMode2 = $(this).val();  // 每一个被选中项的值
    });
    datetimepicker_start=$('#datetimepicker_start').val();
    datetimepicker_end=$('#datetimepicker_end').val();
    SearchMode1=SearchMode1;
    SearchMode2=SearchMode2;
    search_key=$('#search_key').val();
    var start  = new Date(datetimepicker_start.replace(/-/g,"/")).getTime();
    var end = new Date(datetimepicker_end.replace(/-/g,"/")).getTime();
    if(end - start  > 30*24*60*60*1000){
        alert("查询时间不能超过30天");return;
    }

    $('#videoPlayMod').modal('show');
    $('.downloadName').css("display","none");
    var url="recordChart"
    $.ajax({
        type:"POST",
        url:url,
        data:{
            SearchMode1:SearchMode1,SearchMode2:SearchMode2,datetimepicker_start:datetimepicker_start,datetimepicker_end:datetimepicker_end,search_key:search_key
        },
        beforeSend:function(XMLHttpRequest){
            $('.loadEffect').css("display","block");
        },
        success: function(data){
            $('.loadEffect').css("display","none");
            $('.downloadName').css("display","block");
            $('.modal-title').html("操作完成");
            $('.downloadName').html("成功导出统计文件：<a href='"+data.data+"'>点击下载</a>")
        }
    })
}

function tijiao() {
    datetimepicker_start=$('#datetimepicker_start').val();
    datetimepicker_end=$('#datetimepicker_end').val();
    datetimepicker_start = datetimepicker_start.substring(0,10);
    datetimepicker_end = datetimepicker_end.substring(0,10);
    var start  = new Date(datetimepicker_start.replace(/-/g,"/")).getTime();
    var end = new Date(datetimepicker_end.replace(/-/g,"/")).getTime();

    if(end - start  > 30*24*60*60*1000){
        alert("查询时间不能超过30天");return false;
    }

    return true;
}
</script>

    </body>
</html>
